<template>
  <div class="demo02">
    <div>
      <p>{{ msg }}</p>
      <form>
        <el-input type="text" v-model="stu.name" placeholder="姓名" />
        <el-input type="text" v-model="stu.age" placeholder="年纪" />
        <el-input type="submit" @click="addStu" />
      </form>
      <div>
        <ul>
          <li
            v-for="(stu, index) in stus"
            :key="index"
            @click="removeStu(index)"
          >
            {{ stu.name }} -- {{ stu.age }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "demo02",
  setup() {
    let msg = ref("同学们好，这里是vue3.0初识课!");
    let stus = reactive([
      { name: "zs", age: 10 },
      { name: "ls", age: 20 },
      { name: "ww", age: 30 },
    ]);
    let stu = reactive({
      name: "aaaa",
      age: "bbb",
    });
    function addStu(e) {
      debugger;
      e.preventDefault();
      const stu = Object.assign({}, stu);
      stus.push(stu);
      stu.id = "";
      stu.name = "";
      stu.age = "";
    }
    function removeStu(index) {
      stus = stus.filter((stu, idx) => idx !== index);
    }
    return {
      msg,
      stus,
      stu,
      addStu,
      removeStu,
    };
  },
};
</script>

<style lang="scss" >
.demo02 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  p {
    text-align: center;
    margin-bottom: 20px;
  }
  .el-input {
    margin: 10px;
  }
}
</style>
